<template>
  <div :class="[type, { disable }]" class="lj-btn-div">
    <span class="opacity-80 text-xs">{{ content }}</span>
  </div>
</template>

<script setup lang="ts">
const { type, content } = defineProps({
  type: {
    type: String,
    default: 'info',
  },
  content: {
    type: String,
    default: '已计算',
  },
  disable: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped lang="scss">
.lj-btn-div {
  @apply border border-[#CCCCCC] rounded-[5px] text-[#CCCCCC] min-w-16 px-2 py-1 flex justify-center items-center cursor-pointer hover:shadow-sm;
}
.success {
  @apply bg-[#27ae60] text-white hover:bg-[#2ecc71] duration-500;
}
.danger {
  @apply bg-[#c0392b] text-white hover:bg-[#e74c3c] duration-500;
}
.disable {
  @apply opacity-50 cursor-not-allowed;
}
</style>
